<template>
  <div class="server-main">
    <!-- <el-form :inline="true" v-model="modelData" class="search-form">
      <el-form-item label="模型分类" class="status">
        <el-select v-model="modelData.modelSortState">
          <el-option label="全部" value="2"></el-option>
          <el-option label="启用" value="0"></el-option>
          <el-option label="禁用" value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button id="btn" type="primary" @click="onSubmit(1)">查询</el-button>
      </el-form-item>
    </el-form> -->

    <div class="server-table">
      <div class="table-title">
        <span class="table-title-text">模型管理</span>
        <div>
          <!-- zhurh  22/1/14   统计分析按钮 -->
          <el-button type="primary" size="small" @click="openAnalysePop()">统计分析</el-button>
          <el-button type="primary" size="small" @click="openCreateProperty">上传模型</el-button>
        </div>
      </div>
      <el-table :data="tableList" class="km-table">
        <el-table-column type="index" label="ID" width="50" align="center"></el-table-column>
        <el-table-column prop="modelName" label="模型名称" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column prop="modelVersion" label="版本" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column prop="updateTime" label="更新时间" align="center" show-overflow-tooltip></el-table-column>
        <!-- <el-table-column prop="updateUseId" label="操作人员" align="center" show-overflow-tooltip>
        </el-table-column> -->

        <el-table-column label="操作" align="center" width="200">
          <template slot-scope="scope">
            <el-link :underline="false" type="primary" class="ontology-edit"
              @click.native.prevent="openEditOntology(scope.row)">配置</el-link>
            <el-link :underline="false" type="primary" class="ontology-edit"
              @click.native.prevent="deleteProperty(scope.row)">应用记录</el-link>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination class="km-pagination" background :small="true" layout="total, prev, pager, next,sizes, jumper"
        :total="total" :hide-on-single-page="!total" :page-size.sync="modelData.pageSize" :pager-count="7"
        :page-sizes="[10, 20, 30]" :current-page="modelData.pageNum" @size-change="handleSizeChange"
        @current-change="handleCurrentChange">
      </el-pagination>

      <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" @close="afterDialogClose">
        <el-form :model="dialogForm" :rules="dialogRules" ref="dialogForm" label-position="right" label-width="160px"
          :inline="true">
          <el-form-item label="选择文件:" prop="fileName" v-if="dialogTitle !== '参数配置'">
            <el-upload action="#" v-if="!dialogForm.fileName" :before-upload="beforeUpload" :show-file-list="false"
              :http-request="uploadSectionFile">
              <el-button type="primary">选择文件</el-button>
            </el-upload>
            <el-input v-else v-model="dialogForm.fileName" readonly></el-input>
          </el-form-item>
          <el-form-item label="模型名称:">
            <el-input v-model="dialogForm.modelName" readonly></el-input>
          </el-form-item>
          <el-form-item label="模型版本号:" prop="modelVersion">
            <el-input v-model="dialogForm.modelVersion" :readonly="dialogTitle !== '上传模型参数配置'"></el-input>
          </el-form-item>
          <el-form-item label="召回率:" prop="recallRate">
            <el-input v-model="dialogForm.recallRate"></el-input>
          </el-form-item>
          <span :style="{ height: '30px', lineHeight: '38px' }">%</span>
          <el-form-item label="准确率:" prop="exactRate">
            <el-input v-model="dialogForm.exactRate"></el-input>
          </el-form-item>
          <span :style="{ height: '30px', lineHeight: '38px' }">%</span>
          <el-form-item label="最大推荐数量:" prop="maxRecommendCount">
            <el-input v-model="dialogForm.maxRecommendCount"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogDefine(dialogTitle)">确 定</el-button>
        </div>
      </el-dialog>
      <!-- zhurh  22/1/14   分析折线图弹窗 -->
      <el-dialog title="统计分析" v-if='analyseChartsVisible' :visible.sync="analyseChartsVisible" @close="afterDialogClose"
        width="70%" top='8vh' custom-class='dialog-warpper'>
        <div class="el-dialog-div">
          <LineCharts id="analiyseChart" :dataList="chartsList" :modalType="chartModelType">
          </LineCharts>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="resetDialogForm" type="primary">关 闭</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
  import {
    mapState,
    mapMutations
  } from "vuex";
  import LineCharts from "../../components/charts/lineChart.vue";
  export default {
    name: "intelligenceRec",
    components: {
      LineCharts
    },
    data: () => {
      return {
        propertyId: "", // 属性 id
        modelData: {
          name: "", // 需求内容
          modelSortState: "2", // 状态 0 启用，1禁用，2全部
          pageNum: 1, // 页码
          pageSize: 10, // 每页条数
        },
        chartModelType: "XFMX", //zhurh --默认类型
        chartsList: [], //zhurh --图表数据
        tableList: [], // 本体类别列表
        total: 0, // 数据总条数
        analyseChartsVisible: false, //zhurh -- 分析柱状图弹窗显隐控制变量
        dialogVisible: false,
        dialogTitle: "参数配置",
        dialogForm: {
          fileName: "",
          modelName: "修复方案推荐模型",
          modelVersion: "",
          modelType: "XFMX",
          recallRate: "",
          exactRate: "",
          maxRecommendCount: "",
        },
        dialogRules: {
          fileName: [{
            required: true,
            message: "请选择文件",
            trigger: "blur",
          }, ],
          modelVersion: [{
            required: true,
            message: "请输入模型版本号",
            trigger: "blur",
          }, ],
          recallRate: [{
            required: true,
            message: "请输入召回率",
            trigger: "blur",
          }, ],
          exactRate: [{
            required: true,
            message: "请输入准确率",
            trigger: "blur",
          }, ],
          maxRecommendCount: [{
            required: true,
            message: "请输入最大推荐数量",
            trigger: "blur",
          }, ],
        },
      };
    },
    computed: {
      ...mapState({
        containerDom: (state) => state.server.containerDom,
      }),
    },
    created() {
      this.getTableList();
    },
    methods: {
      // 查询
      onSubmit(pageNum) {
        this.modelData.pageNum = pageNum ? pageNum : this.modelData.pageNum;
        this.getTableList();
      },

      // 获取本体模型属性列表
      async getTableList() {
        let params = {
          modelCategory: "XFTJ",
          pageNum: this.modelData.pageNum,
          pageSize: this.modelData.pageSize
        };
        let res = await this.$axios.post(
          this.$api.repaireSchemeRec.zehaoObj.selectPageList,
          params
        );
        if (res.data.code !== 200) {
          this.$message.warning(res.data.message);
          return;
        }
        this.total = res.data.data.total;
        this.tableList = res.data.data.list;
      },

      // 修改当前页码
      handleCurrentChange(page) {
        this.modelData.pageNum = page;
        this.getTableList();
      },
      // 修改每页条数
      handleSizeChange(e) {
        this.getTableList();
      },

      // 应用记录
      deleteProperty(row) {
        const {
          modelId
        } = row;
        this.$router.push({
          path: "/repaireSchemeRec/modelManagementResultCheck",
          query: {
            modelId,
          },
        });
      },

      // 配置
      openEditOntology(row) {
        this.dialogTitle = "参数配置";
        this.dialogVisible = true;
        const {
          modelId,
          modelVersion,
          recallRate,
          exactRate,
          maxRecommendCount,
        } = row;
        this.modelId = modelId;
        this.dialogForm.modelVersion = modelVersion;
        this.dialogForm.recallRate = recallRate;
        this.dialogForm.exactRate = exactRate;
        this.dialogForm.maxRecommendCount = maxRecommendCount;
      },

      // 上传模型
      openCreateProperty() {
        this.dialogTitle = "上传模型参数配置";
        this.dialogVisible = true;
        this.dialogForm.modelVersion = "";
        this.dialogForm.recallRate = "";
        this.dialogForm.exactRate = "";
        this.dialogForm.maxRecommendCount = "";
        this.dialogForm.modelType = "XFMX";
      },

      // 配置函数
      async tableConfig() {
        let {
          maxRecommendCount,
          modelName,
          modelVersion,
          recallRate,
          exactRate,
        } = this.dialogForm;
        let params = {
          modelId: this.modelId,
          maxRecommendCount: Number(maxRecommendCount),
          modelCategory: "XFTJ",
          modelType: "XFMX",
          modelName,
          modelVersion,
          recallRate,
          exactRate,
        };
        let res = await this.$axios.post(
          this.$api.repaireSchemeRec.zehaoObj.update,
          params
        );
        if (+res.data.code === 200) {
          this.dialogVisible = false;
          this.$message.success("配置成功");
          this.getTableList();
        } else if (+res.data.code === 201) {
          this.$message.warning(res.data.message);
          this.dialogVisible = false;
        } else {
          this.$message.error(res.data.message);
          this.dialogVisible = false;
        }
      },

      // 上传文件
      async uploadSectionFile() {
        let params = {
          file: this.uploadFile,
        };
        let res = await this.$fileHttp.uploadFile(
          this.$api.repaireSchemeRec.zehaoObj.uploadfile,
          params
        );
        this.modelUrl = res.data;
      },

      // 上传模型
      async uploadModel() {
        let {
          maxRecommendCount,
          modelName,
          modelVersion,
          recallRate,
          exactRate,
        } = this.dialogForm;
        let params = {
          maxRecommendCount: Number(maxRecommendCount),
          modelCategory: "XFTJ",
          modelType: "XFMX",
          modelName,
          modelVersion,
          recallRate,
          exactRate,
          modelUrl: this.modelUrl,
        };
        let res = await this.$axios.post(
          this.$api.repaireSchemeRec.zehaoObj.insertModel,
          params
        );
        if (+res.data.code === 200) {
          this.dialogVisible = false;
          this.$message.success("上传成功");
          this.getTableList();
        } else if (+res.data.code === 201) {
          this.$message.warning(res.data.message);
          this.dialogVisible = false;
        } else {
          this.$message.error(res.data.message);
          this.dialogVisible = false;
        }
      },

      // 上传文件前保存文件名和文件对象
      beforeUpload(file) {
        this.dialogForm.fileName = file.name;
        this.uploadFile = file;
        return false;
      },
      // zhurh--打开分析柱状图弹框
      openAnalysePop(row) {
        this.getModelList("XFMX");
      },
      // zhurh--获取分析折线图数据
      getModelList(type) {
        this.$axios
          .get(
            `${this.$api.resultAnalyse.zehaoObj.modelAnalyse}?modelType=${type}`
          )
          .then((res) => {
            this.chartsList = res.data.data;
            this.analyseChartsVisible = true;
          })
          .catch((err) => {
            console.error(err);
          });
      },

      // 模态框关闭后
      afterDialogClose() {
        this.$refs.dialogForm && this.$refs.dialogForm.resetFields();
      },
      // 取消
      resetDialogForm() {
        this.dialogVisible = false;
        this.analyseChartsVisible = false;
      },
      // 点击确定后执行
      dialogDefine(title) {
        this.$refs.dialogForm.validate(async (valid) => {
          if (valid) {
            switch (title) {
              case "参数配置":
                this.tableConfig();
                break;
              case "上传模型参数配置":
                await this.uploadSectionFile();
                if (this.modelUrl) {
                  this.uploadModel();
                }
                break;
            }
          }
        });
      },
    },
  };
</script>
<style>
  .dialog-warpper {
    padding: 20px;
  }
</style>
<style lang="scss" scoped>
  .el-dialog-div {
    height: 60vh;
    overflow: hidden;
    // padding: 20px;
  }

  .server-main {
    position: relative;

    .search-form {
      padding: 0 20px;
    }

    .form-input ::v-deep .el-input {
      width: 250px;
      margin-right: 20px;
    }

    .server-table {
      margin-top: 16px;
      padding: 16px 32px 64px;
      background: #ffffff;
      border-radius: 4px;

      .table-title {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .table-title-text {
          margin: 8px 0;
          font-size: 16px;
          line-height: 16px;
          border-left: 5px solid $--color-primary;
          padding-left: 10px;
        }

        margin-bottom: 10px;
      }
    }

    .ontology-edit {
      padding: 0 10px;

      &+.ontology-edit {
        border-left: 1px solid #dddddd;
      }
    }

    ::v-deep .el-table__append-wrapper {
      padding: 10px;
    }

    ::v-deep .el-dialog {
      width: 500px;
      border-radius: 5px;
    }

    .dialog-inline {
      ::v-deep .el-form-item__content {
        width: 300px;
      }

      button.el-button {
        background-color: $--color-primary !important;
        color: #fff !important;
        line-height: 1.2;
      }
    }
  }
</style>